<script setup lang="ts">
import {collapsed} from "@/components/admin/f_menu";
import {userStorei} from "@/stores/user_store";

const store = userStorei()

</script>

<template>
  <div class="f_logo" :class="{collapsed: collapsed}">
    <img :src="store.siteInfo.site.logo" class="logo" alt="logo">
    <div class="slogan">
      <div>{{  store.siteInfo.site.title  }}</div>
      <div>{{  store.siteInfo.site.enTitle }}</div>
    </div>
  </div>
</template>

<style lang="less">
.f_logo {
  display: flex;
  justify-content: center;
  align-items: center;

  &.collapsed {
    .slogan {
      transform: scale(0);
      transform-origin: left;
      opacity: 0;
    }
    .logo{
      transform: translateX(40px);
      width: 30px;
      height: 30px;

    }
  }

  .logo {
    width: 50px;
    height: 50px;
    transition: all .3s;
    border-radius: 50%;
  }

  .slogan {
    margin-left: 10px;
    transition: all .3s;

    div:nth-child(1) {
      font-size: 22px;
      font-weight: 600;
    }

    div:nth-child(2) {
      font-size: 12px;
      margin-top: 1px;
    }
  }
}
</style>